<template>
  <a-row style="padding: 10px; background: #fff">
    <a-col :span="24" class="top_classroom">
      <p class="title"><span class="marking"></span>公开课</p>
      <a-card :bordered="false" style="box-shadow: 2px 2px 10px #ccc">
        <ul class="list">
          <li v-for="(item, index) in 3" :key="index">
            <div>
              <p class="calss_title">项目打造近零碳排放校园示范标杆</p>
              <div class="class_content">
                6月1日，下午两点,基础实操线上公开课
              </div>
            </div>
            <div class="see">
              立即查看<a-icon type="arrow-right" style="margin-left: 10px" />
            </div>
          </li>
        </ul>
      </a-card>
    </a-col>
    <a-col :md="4" :lg="4" :xl="2" class="left_classroom">
      <ul>
        <li
          v-for="(item, index) in classLst"
          :key="index"
          :class="[index == idx ? 'activeLi' : '']"
          @click="activeLiFun(item, index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </a-col>
    <a-col :span="22" class="right_classroom">
      <div class="title_box">
        <p>
          {{ currentClass.name }}
        </p>
        <span> {{ currentClass.enName }}</span>
      </div>

      <a-row class="video_box">
        <a-col
          :xs="20"
          :sm="10"
          :md="8"
          :lg="8"
          :xl="6"
          v-for="(item, index) in 7"
          :key="index"
          class="video_box_content"
        >
          <div class="video_box_content_bg">
            <img src="@/assets/img/about_1.jpg" />
            <div class="text_box">
              <div class="Level">初阶</div>
              <p>Level0:国内外应对气候的历史做法和发展趋势</p>
              <span>关键字:碳中和</span>
              <div>
                碳交易理论、国内外碳交易市场现状、发展及趋势,.碳达峰、碳中和发展历程,企业碳达峰碳中和实现路径
              </div>

            </div>
          </div>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "Classroom",
  data() {
    return {
      idx: 0,
      currentClass: {
        name: "全部课程",
        enName: "All Courses",
      },
      classLst: [
        {
          name: "全部课程",
          enName: "All Courses",
        },
        {
          name: "碳中和",
          enName: "Carbon Neutral",
        },
        {
          name: "碳资产",
          enName: "Carbon Assets",
        },
        {
          name: "碳达峰",
          enName: "Carbon Peak",
        },
        {
          name: "产品碳足迹",
          enName: "Product Carbon Footprint",
        },
      ],
    };
  },
  methods: {
    activeLiFun(obj, index) {
      this.idx = index;
      this.currentClass = obj;
    },
  },
};
</script>

<style lang="scss" scoped>
.top_classroom {
  margin-bottom: 30px;

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    .marking {
      width: 6px;
      height: 26px;
      background: #0199d9;
      margin-right: 12px;
    }
  }
  .list {
    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      padding: 18px 0;
      .calss_title {
        color: #0199d9;
        font-size: 14px;
        margin-bottom: 6px;
        font-weight: 600;
      }
      .class_content {
        font-size: 12px;
      }
      .see {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
}
.left_classroom {
  padding-left: 10px;
  ul {
    li {
      text-align: left;
      margin-bottom: 12px;
      font-size: 14px;
      height: 28px;
      line-height: 28px;
      transition: 0.2s;
      &:hover {
        opacity: 0.85;
        transition: 0.2s;
        cursor: pointer;
      }
    }
    .activeLi {
      transition: 0.2s;
      font-size: 18px;
      font-weight: 600;
      color: #000;
    }
  }
}
.right_classroom {
  .title_box {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 10px;
    p {
      font-size: 18px;
      font-weight: 600;
      color: #000;
      margin-bottom: 6px;
    }
    span {
      font-size: 14px;
      color: #999;
    }
  }
  .video_box {
    .video_box_content {
      padding: 10px;

      .video_box_content_bg {
        background: #fff;
        box-shadow: 2px 2px 10px #ccc;
        img {
          height: 220px;
          object-fit: cover;
          width: 100%;
        }
        .text_box {
          padding: 20px 10px;
          text-align: left;
          .Level {
            background: #fdf4d8;
            color: #fec14f;
            padding: 2px 6px;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 6px;
          }
          p {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
          }
          span {
            color: #0099d9;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 12px;
          }
          div {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>